<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:insert="commen/head :: header">
    </div>

    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById("delete");
            btn.onclick = function () {
                var msg = "确定移除该学生吗？"
                if (confirm(msg) === true) {
                    return true;
                } else {
                    return false;
                }
            }
        }
//        function validateForm() {
//            alert(session.error);
//            // var x = document.forms["myForm"]["fname"].value;
//            if ([[${session.error}]]) {
//                alert("需要输入名字");
//                return false;
//            }
//        }
    </script>
</head>
<body style="background-color: rgb(242,244,247)">
<div th:insert="commen/navigationBar :: topNavBar"></div>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-2">
            <div style="text-align: center" th:insert="commen/navigationBar :: leafTeaNavBar"></div>
        </div>
        <div class="col-md-10" style="background-color: #ffffff; margin-top: 5px; padding: 10px;">
            <form th:action="@{'/getStudent/' + ${courseId}}" method="post" style="display: inline-flex;">
                <input  type="hidden" name="courseId" th:value="${courseId}">
                <input class="form-control" type="text" name="name" style="margin-right: 10px; ">
                <input class="btn-default btn" type="submit" value="搜索">
                <input type="hidden" th:value="${error}" id="ero">
            </form>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalAddStudent">
                手动添加学生
            </button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addMoreStudent">
                批量添加学生
            </button>
            <table class="table table-hover table-striped">
                <thead>
                <tr style="font-size: 18px; font-weight: bold;">
                    <td>ID</td>
                    <td>姓名</td>
                    <td>院系</td>
                    <td>专业</td>
                    <td>班级</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody>
                <div th:each="user : ${page.list}">
                    <tr style="font-size: 18px">
                        <td th:text="${user.userId}"></td>
                        <td th:text="${user.userName}"></td>
                        <td th:text="${user.department}"></td>
                        <td th:text="${user.major}"></td>
                        <td th:text="${user.gradeClass}"></td>

                        <td>
                            <a id="delete" th:href="@{'/deleteStudent/' + ${user.userId}}">移除出班级</a>
                        </td>
                    </tr>
                </div>
                </tbody>
            </table>
            <div class="ui attached segment" style="margin-left: 360px;" >
                <table class="m-mobile-wide" width="425px">
                    <tbody>
                    <tr align="center">
                        <td>
                            <a th:href="@{${#httpServletRequest.getRequestURI()} + '?pageNum=' + ${page.pageNum - 1}}"  class="ui button basic mini" th:unless="${page.isFirstPage}">上一页</a>
                        </td>
                        <td>
                            第
                            <h8 th:text="${page.pageNum}">2</h8>
                            页/共
                            <h8 th:text="${page.pages}">4</h8>
                            页
                            共
                            <h8 th:text="${page.total}">29</h8>
                            条
                        </td>
                        <td> &nbsp;</td>
                        <td  style="float: right">
                            <a th:href="@{${#httpServletRequest.getRequestURI()} + '?pageNum=' + ${page.pageNum+1}}" class="ui button basic mini "  th:unless="${page.isLastPage}">下一页</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



<!--模态框-->
<div class="modal fade" id="addMoreStudent">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">批量添加学生</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <form th:action="@{/addMoreStudent}" method="post">
                    <div class="row pre-scrollable">
                        <div>
                            <div style="float:left; margin-left: 38px;">姓名</div>
                            <div  style="float:left; margin-left: 220px;">系部</div>
                            <div  style="float: right; margin-right: 38px;">专业</div>
                        </div>
                        <ul style="margin-top: 20px;" class="list-group">
                            <li class="list-group-item" th:each="student : ${allStudent}">
                                <label><input name="userId" type="checkbox" th:value="${student.getUserId()}"/>
                                    <span style="" th:text="${student.getUserName()}"></span>
                                    <span style="align-content: center" th:text="${student.getDepartment()}"></span>
                                    <span style="left: 90%;text-align: right" th:text="${student.getGradeClass()}"></span>
                                </label>
                            </li>
                        </ul>
                    </div>
                    <input type="submit" value="添加" class="btn btn-success">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="ModalAddStudent">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">手动添加</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <form th:action="@{/addStudent}" onsubmit="validateForm()" method="post">
                    学号 :<input class="form-control" type="text" name="userId" placeholder="请输入学生学号"><br>
                    <input class="btn-success btn" type="submit" value="添加" id="addStudent">
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    let er = document.getElementById("ero")
    if (er.value == "") {

    } else {
        alert(er.value)
    }
</script>

</body>
</html>